<!--医院端--订单跟踪--批发采购订单列表--部分入库详情 -->
<template>
  <div class="auth-product partDetailsBox">
    <el-container class="partDetails">
      <!-- 列表 -->
      <el-collapse
        class="collapsebox"
        v-model="activeitemNames"
        @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <el-form
              ref="form"
              class="topForm"
              :model="receiptDetailsForm"
              label-width="130px">
              <el-form-item label="平台订单编号:">
                {{ formdata.orderCode }}
              </el-form-item>
              <el-form-item label=" 医院订单编号:">
                {{ formdata.hospitalOrderCode }}
              </el-form-item>
            </el-form>
          </template>
          <div>
            <el-header height="auto">
              <div class="formToptext">
                <el-form
                  :inline="true"
                  :model="formdata"
                  ref="ruleForm"
                  label-width="150px" >
                  <el-form-item
                    v-for="(item,index) in partDetailsDetailForm"
                    :key="index"
                    :label="item.title">
                    <!-- 状态 -->
                    <div
                      v-if="item.key === 'orderStatus'"
                      class="textBox">：{{ statusArr[Number(formdata[item.key])] }}</div>
                    <!-- 寄售地址 -->
                    <div
                      v-else-if="item.key === 'province'"
                      class="textBox"
                    >
                      : {{ formdata.province ? formdata.province : '' }}
                      {{ formdata.city===formdata.province ? '' : formdata.city }}
                      {{ formdata.area ? formdata.area : '' }}
                      {{ formdata.detailedAddress? formdata.detailedAddress : '' }}
                    </div>
                    <div
                      v-else
                      class="textBox">：{{ formdata[item.key] }}</div>
                  </el-form-item>
                </el-form>
              </div>
            </el-header>
            <!-- 列表模块 -->
            <el-editable
              class="hospital-edit-box"
              :data="getList"
              height="200"
              :columns="partDetailsTableData"
            >
              <template
                slot-scope="scope"
                slot="default-category"
              >
                {{ category[scope.row.category] }}
              </template>
            </el-editable>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-container>
    <div class="partTitle">收货明细</div>
    <div
      v-for="(item,index) in deliveryDetailList"
      :key=index>
      <RecordZoomCard
        :card-data="item.needItemList"
        :need-title="true"
        :card-columns="receiptDetailsTable"
        :card-son-columns='receiptDetailsTableInside'
        :show-list="true"
        :row-title='rowTitle'
        :base-info='baseInfo[index]'
      >
        <template
          slot="baseInfo"
          slot-scope="scope">
          <div>
            <el-form
              :inline="true"
              label-width="155px"
            >
              <el-form-item
                v-for="(item) in ReceivingTitle"
                :key='item.key'
                :label='item.label'>
                {{ scope.baseInfo[item.key] }}
              </el-form-item>
            </el-form>
          </div>
        </template>
      </RecordZoomCard>
    </div>
  </div>
</template>

<script>
import RecordZoomCard from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/accompaniedbygoods'
import {
  partDetailsTableData,
  partDetailsDetailForm,
  statusArr,
  receiptDetailsTable,
  receiptDetailsTableInside,
  ReceivingTitle
} from './const'
import { attrItemList } from '@const/orderCenterApi'
import SearchForm from '@components/businesscomponents/search'
import {
  attrHospitalNeedOrder,
  attrHospitalNeedOrderItem,
  attrRecceiveDetail,
  attrReceiveList,
  attrGerUserById
  // getScWarehouseEntryRead
} from '@const/beforeSettleApi'

import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { hasIn, chunk } from 'lodash'

import ElEditable from '@components/el-editable'

export default {
  components: { ElEditable, SearchForm, RecordZoomCard },
  data () {
    return {
      // 展开收起
      activeitemNames: ['1'],
      // 展开收起
      activeNames: [],
      // 订单状态
      statusArr,
      // 表头
      partDetailsTableData,
      // 表格数据
      getList: [],
      // 收货明细列表
      receiveList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      partDetailsDetailForm,
      // 部分收货表单
      receiptDetailsForm: {},
      // 产品大类
      category: {
        1: '高值',
        2: '低值',
        3: '试剂',
        4: '设备',
        5: '器械'
      },
      // 部分收货表格
      receiptDetailsTable,
      // 部分收货内部
      receiptDetailsTableInside,
      // 详情ID
      detailsId: this.$route.query.id,
      ReceivingTitle,
      deliveryDetailList: [],
      baseInfo: [],
      partDetailTableLoading: false,
      insideTableLoading: false,
      rowTitle: 'distributorList'
    }
  },

  mounted () {
    // this.getReceiveList()
    let arr = [{ type: 'button', val: '返回', handle: this.back }]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.getProductInfo()
    this.list()
    this.getDeliveryDetailList()
  },
  methods: {
    // getDeliveryDetailList () {
    //   this.$axios
    //     .get(`${attrItemList}?id=${this.$route.query.id}&type=2`)
    //     .then(({ data }) => {
    //       if (Number(data.code) !== 0) return
    //       this.deliveryDetailList = data.payload
    //       console.log(this.deliveryDetailList)
    //       this.baseInfo = this.deliveryDetailList.map(item => {
    //         return {
    //           receiveCode: item.receiveCode,
    //           createdAt: item.createdAt,
    //           purchaseNumCount: item.purchaseNumCount,
    //           receiveNumCount: item.receiveNumCount
    //         }
    //       })
    //     })
    //     .catch(e => {})
    //     .finally(() => {})
    // },
    // 点击返回
    back () {
      this.$router.go(-1)
    },
    // 根据地址ID获取联系人
    getUserById () {
      this.$axios({
        method: 'post',
        url: attrGerUserById,
        params: {
          id: this.formdata.receiveAddressId
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
        this.formdata = Object.assign(this.formdata, result)
        this.$forceUpdate()
      })
    },
    getDeliveryDetailList () {
      this.partDetailTableLoading = true
      this.insideTableLoading = true
      // type 标识订单来源，1.批发2.寄售3.跟台
      this.$axios
        .get(`${attrItemList}?id=${this.id}&type=2`)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.deliveryDetailList = data.payload
          console.log(this.deliveryDetailList)
          this.baseInfo = this.deliveryDetailList.map(item => {
            return {
              receiveCode: item.receiveCode,
              createdAt: item.createdAt,
              purchaseNumCount: item.purchaseNumCount,
              receiveNumCount: item.receiveNumCount
            }
          })
        })
        .catch(e => {})
        .finally(() => {
          this.partDetailTableLoading = false
          this.insideTableLoading = false
        })
    },
    // 获取产品基本数据
    getProductInfo () {
      this.$axios({
        method: 'post',
        url: attrReceiveList,
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        if (result.length) {
          this.formdata = result[0]
          this.getUserById()
        }
      })
    },

    // 获取产品列表
    list () {
      // Loading加载开始
      // 请求列表数据
      this.$axios({
        method: 'post',
        url: attrHospitalNeedOrderItem,
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload'])
          ? res.data.payload.content
          : []
        this.getList = result.map(item => {
          return item
        })
      })
    },

    // 获取收货明细
    // getReceiveList() {
    //   this.$axios({
    //     method: 'get',
    //     url: attrItemList,
    //     params: {
    //       id: this.$route.query.id,
    //       type: 2
    //     }
    //   }).then(res => {
    //     let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
    //     console.log(result, 'sss')
    //     this.receiveList = result.map(item => {
    //       return item
    //     })
    //   })
    // },

    // 展开收起
    handleChange (val) {
      console.log(this.formdata, this.getList)
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.partDetailsBox {
  .partTitle {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin: 20px;
  }
}

.partDetails {
  //   height: 100%;
  //   overflow: auto;
  .topForm {
    display: flex;
  }

  .collapsebox {
    width: 100%;

    .titleBox {
      width: 100%;
    }

    .formBox {
      width: 500px;
      float: left;
    }

    .submissionBox {
      float: right;
      margin-right: 10px;
    }
  }

  .receiptDetailsForm {
    display: flex;
  }

  .addbutton {
    border: none;
    background: none;
    color: rgba(35, 113, 197, 1);
  }

  .submission {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    margin-bottom: 10px;
  }

  .topInput {
    width: 211px;
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
